// https://joyqi.github.io/sfz/
(function() {
    let $, autoRefresh, canvas, dataURItoBlob, drawText, file, generateFileName, graph, image, input, inputItems,
        makeStyle, readFile, redraw, refresh, textCtx;

    $ = function(sel) {
        return document.querySelector(sel);
    };

    inputItems = ['text', 'color', 'alpha', 'angle', 'space', 'size'];

    input = {};

    image = $('#image');

    graph = $('#graph');

    refresh = $('#refresh');

    autoRefresh = $('#auto-refresh');

    file = null;

    canvas = null;

    textCtx = null;

    redraw = null;

    dataURItoBlob = function(dataURI) {
        let arr, binStr, i, k, len, ref;
        binStr = atob((dataURI.split(','))[1]);
        len = binStr.length;
        arr = new Uint8Array(len);
        for (i = k = 0, ref = len - 1; (0 <= ref ? k <= ref : k >= ref); i = 0 <= ref ? ++k : --k) {
            arr[i] = binStr.charCodeAt(i);
        }
        return new Blob([arr], {
            type: 'image/png'
        });
    };

    generateFileName = function() {
        let d, pad;
        pad = function(n) {
            if (n < 10) {
                return '0' + n;
            } else {
                return n;
            }
        };
        d = new Date();
        return '' + d.getFullYear() + '-' + (pad(d.getMonth() + 1)) + '-' + (pad(d.getDate())) + ' ' + (pad(d.getHours())) + (pad(d.getMinutes())) + (pad(d.getSeconds())) + '.png';
    };

    readFile = function() {
        let fileReader;
        if (file == null) {
            return;
        }
        fileReader = new FileReader();
        fileReader.onload = function() {
            let img;
            img = new Image();
            img.onload = function() {
                let ctx;
                canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                textCtx = null;
                ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                redraw = function() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    return ctx.drawImage(img, 0, 0);
                };
                drawText();
                graph.innerHTML = '';
                graph.appendChild(canvas);
                return canvas.addEventListener('click', function() {
                    let blob, imageData, link;
                    link = document.createElement('a');
                    link.download = generateFileName();
                    imageData = canvas.toDataURL('image/png');
                    blob = dataURItoBlob(imageData);
                    link.href = URL.createObjectURL(blob);
                    graph.appendChild(link);
                    return setTimeout(function() {
                        link.click();
                        return graph.removeChild(link);
                    }, 100);
                });
            };
            return img.src = fileReader.result;
        };
        return fileReader.readAsDataURL(file);
    };

    makeStyle = function() {
        let match;
        match = input.color.value.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
        return 'rgba(' + (parseInt(match[1], 16)) + ',' + (parseInt(match[2], 16)) + ',' + (parseInt(match[3], 16)) + ',' + input.alpha.value + ')';
    };

    drawText = function() {
        let i, j, k, l, margin, ref, ref1, ref2, ref3, step, textSize, width, x, y;
        if (canvas == null) {
            return;
        }
        textSize = input.size.value * Math.max(15, (Math.min(canvas.width, canvas.height)) / 25);
        if (textCtx != null) {
            redraw();
        } else {
            textCtx = canvas.getContext('2d');
        }
        textCtx.save();
        textCtx.translate(canvas.width / 2, canvas.height / 2);
        textCtx.rotate(input.angle.value * Math.PI / 180);
        textCtx.fillStyle = makeStyle();
        textCtx.font = 'bold ' + textSize + 'px -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif';
        width = (textCtx.measureText(input.text.value)).width;
        step = Math.sqrt((Math.pow(canvas.width, 2)) + (Math.pow(canvas.height, 2)));
        margin = (textCtx.measureText('啊')).width;
        x = Math.ceil(step / (width + margin));
        y = Math.ceil((step / (input.space.value * textSize)) / 2);
        for (i = k = ref = -x, ref1 = x; (ref <= ref1 ? k <= ref1 : k >= ref1); i = ref <= ref1 ? ++k : --k) {
            for (j = l = ref2 = -y, ref3 = y; (ref2 <= ref3 ? l <= ref3 : l >= ref3); j = ref2 <= ref3 ? ++l : --l) {
                textCtx.fillText(input.text.value, (width + margin) * i, input.space.value * textSize * j);
            }
        }
        textCtx.restore();
    };

    image.addEventListener('change', function() {
        let ref;
        file = this.files[0];
        if ((ref = file.type) !== 'image/png' && ref !== 'image/jpeg' && ref !== 'image/gif') {
            return alert('仅支持 png, jpg, gif 图片格式');
        }
        return readFile();
    });

    inputItems.forEach(function(item) {
        let el;
        el = $('#' + item);
        input[item] = el;
        autoRefresh.addEventListener('change', function() {
            if (this.checked) {
                return refresh.setAttribute('disabled', 'disabled');
            } else {
                return refresh.removeAttribute('disabled');
            }
        });
        el.addEventListener('input', function() {
            if (autoRefresh.checked) {
                return drawText();
            }
        });
        return refresh.addEventListener('click', drawText);
    });

}).call(this);